<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="修改房间信息"
      left-arrow
      @click-left="back"
    />
    <div class="change">
      <div class="part2">
        <span>房间图片</span>
        <van-uploader
          v-model="roomImglist"
          :max-count="5"
          :after-read="afterReadroom"
          @delete="deleteimgroom"
        />
      </div>
      <div class="part2">
        <span>房间面积</span>
        <input
          placeholder="请填写"
          type="number"
          v-model="gethouseinfo.roomAcre"
        />
        <div class="">m<span class="up">2</span></div>
      </div>
      <div class="part2">
        <span>租金价格</span>
        <input
          placeholder="请填写"
          type="number"
          v-model="gethouseinfo.leasePrice"
        />
        <div class="">元</div>
      </div>
      <div class="part2">
        <span>付款方式</span>
        <div @click="show = true">{{ roomway }}</div>
      </div>
      <div class="part3">
        房间设施<span>(丰富配置，可适当提高租赁价格)</span>
      </div>
      <div class="sort">
        <span
          ref="roomlab"
          @click="roomlabchoose($event)"
          v-for="item in roomlist"
          :key="item"
          >{{ item }}</span
        >
      </div>
      <div class="btnpart">
        <button @click="jump">确认</button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '35%' }">
      <van-picker
        show-toolbar
        title="付款方式"
        visible-item-count="4"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { changeUtils } from "../../utils/change.js";
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { getToken } from "../../apis/house";
import local from "../../utils/local.js";
import { roomchange, getEditroomdetail } from "../../apis/house.js";
const qiniu = require("qiniu-js");
export default {
  data() {
    return {
      roomway: "请选择",
      roomImglist: [],
      gethouseinfo: { roomImages: [] },
      show: false,
      columns: ["月付", "季付", "半年付", "年付"],
      roomlist: [
        "床",
        "电视",
        "衣柜",
        "空调",
        "沙发",
        "书桌",
        "独卫",
        "带阳台",
      ],
      chooseroomlist: [],
      token: "",
      roomimg: [],
    };
  },
  created() {
    this.gethouseinfo.roomId = this.$route.query.roomId;
    this.getqntoken();
    this.getroominfo();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async getroominfo() {
      await getEditroomdetail({
        roomId: this.gethouseinfo.roomId,
      }).then((response) => {
        console.log(response.result);
        this.roomimg = response.result.roomImages;
        this.gethouseinfo.leasePrice = response.result.leasePrice;
        this.gethouseinfo.roomAcre = response.result.roomAcre;
        this.gethouseinfo.roomPaymentMethod = response.result.roomPaymentMethod;
        this.chooseroomlist = response.result.roomService;

        if (this.roomimg.length > 0) {
          this.roomimg.forEach((e) => {
            let obj = { url: "", isImage: true };
            obj.url = this.$imgUrl + e;
            this.roomImglist.push(obj);
          });
        }
        if (this.gethouseinfo.roomPaymentMethod == 1) {
          this.roomway = "月付";
        } else if (this.gethouseinfo.roomPaymentMethod == 2) {
          this.roomway = "季付";
        } else if (this.gethouseinfo.roomPaymentMethod == 3) {
          this.roomway = "半年付";
        } else if (this.gethouseinfo.roomPaymentMethod == 4) {
          this.roomway = "年付";
        }

        if (this.chooseroomlist.length > 0) {
          this.$nextTick(() => {
            this.$refs.roomlab.forEach((e) => {
              this.chooseroomlist.forEach((item) => {
                if (e.innerText == item) {
                  e.classList.add("active");
                }
              });
            });
          });
        }
      });
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    jump() {
      if (
        this.gethouseinfo.leasePrice &&
        this.gethouseinfo.roomAcre &&
        this.roomimg.length != 0 &&
        this.gethouseinfo.roomPaymentMethod
      ) {
        let elist = JSON.stringify(this.chooseroomlist);
        elist = JSON.parse(elist);
        for (let i = 0; i < elist.length; i++) {
          elist[i] = changeUtils.getHouseService(elist[i]);
        }
        this.gethouseinfo.roomService = elist.join(",");
        this.gethouseinfo.roomImages = this.roomimg.join(",");
        console.log(this.gethouseinfo);
        roomchange(this.gethouseinfo).then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
            this.$toast.success("修改成功");
          }
        });
      } else {
        this.$toast("您有必填项未填");
      }
    },
    roomlabchoose(event) {
      if (event.currentTarget.classList[0] === "active") {
        let i = this.chooseroomlist.indexOf(event.currentTarget.innerText);
        this.chooseroomlist.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        event.currentTarget.classList.add("active");
        this.chooseroomlist.push(event.currentTarget.innerText);
      }
    },
    afterReadroom(file) {
      let _this = this;
      let fileurl = file.content;
      let name = file.file.name;
      let imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.roomimg.push(res.key);
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    deleteimgroom(file) {
      let i = this.roomimg.indexOf(file.key);
      this.roomimg.splice(i, 1);
    },
    onConfirm(value) {
      this.roomway = value;
      if (value == "月付") {
        this.gethouseinfo.roomPaymentMethod = 1;
      } else if (value == "季付") {
        this.gethouseinfo.roomPaymentMethod = 2;
      } else if (value == "半年付") {
        this.gethouseinfo.roomPaymentMethod = 3;
      } else if (value == "年付") {
        this.gethouseinfo.roomPaymentMethod = 4;
      }
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.part2 {
  display: flex;
  margin: 0 15px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  color: #333;

  input {
    border: none;
  }

  > span {
    margin-right: 20px;
    width: 70px;
  }

  div {
    span {
      border: 1px solid #ccc;
      padding: 2px 8px;
      margin-right: 10px;
    }

    .active {
      border-color: #45b7cb;
      color: #45b7cb;
    }
  }

  .up {
    border: none;
    padding: 0;
    margin: 0;
    vertical-align: text-top;
    font-size: 10px;
  }
}
.part3 {
  margin: 0 15px;
  padding-top: 15px;

  span {
    color: #ccc;
    font-size: 14px;
  }
}
.sort {
  margin: 20px 10px 10px;
  span {
    display: inline-block;
    width: 23%;
    height: 30px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    margin-bottom: 15px;
    margin-right: 5px;
    font-size: 13px;
    color: #666;
  }
  .active {
    background-color: #45b7cb;
    color: #fff;
  }
}
.choosesort {
  span {
    background-color: #45b7cb;
    color: #fff;
  }
}
.btnpart {
  text-align: center;
  button {
    border-radius: 20px;
    border: 1px solid #45b7cb;
    background-color: #45b7cb;
    color: #fff;
    height: 40px;
    width: 90%;
  }
}
</style>